'use client'

import { useEffect } from 'react'
import { useParams } from 'next/navigation'
import { Box, useColorModeValue } from '@chakra-ui/react'
import { Header } from '@/components/layout/Header'
import { MainLayout } from '@/components/layout/MainLayout'
import { NovelEditor } from '@/components/editor/NovelEditor'
import { useChapterStore } from '@/store/chapterStore'

export default function EditorPage() {
  const params = useParams()
  const chapterId = params.id as string
  const { currentChapter, selectChapter } = useChapterStore()
  
  const bgColor = useColorModeValue('white', 'gray.900')
  
  useEffect(() => {
    if (chapterId) {
      selectChapter(chapterId)
    }
  }, [chapterId, selectChapter])
  
  return (
    <MainLayout
      header={<Header />}
      main={
        <Box
          h="100%"
          bg={bgColor}
          overflow="auto"
        >
          <NovelEditor chapterId={chapterId} />
        </Box>
      }
    />
  )
} 